<template>
  <div id="app">
    <router-view></router-view>
    <div class="loading-layer" v-if="loading">
      <img width="30px" height="30px" class="loading" src="./assets/images/loading1.gif" alt="" />
    </div>
  </div>
</template>

<script>

  import { mapState } from "vuex";

  export default {
    name: 'app',
    computed: mapState({
      // 箭头函数可使代码更简练
      loading: state => state.loading
    })
  }

</script>

<style rel="stylesheet/scss" lang="scss">
  @import "assets/css/index.scss";
  @import url('//at.alicdn.com/t/font_454120_9gqkn631ayz257b9.css');
  .pull-right {
    float: right!important;
  }
  .pull-left {
    float: left!important;
  }

   .avatar-wrapper .el-badge__content.is-fixed{
    top: 10px;
    right: 20px;
  }
   .avatar-wrapper.el-submenu.is-active .el-submenu__title,.avatar-wrapper.el-submenu:hover .el-submenu__title{
    border-bottom: 0;
  }
  .avatar-wrapper.el-submenu .el-submenu__title{
    height: 80px;
    line-height: 80px;
    border-bottom: 0;
  }
  .avatar-wrapper.el-submenu>.el-menu{
    left: inherit;
    right: 25px;
  }
  .el-textarea {
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
  }
  .btn-edit{
    color: #50bfff;
  }
  .btn-delete{
    color: #f7ba2a;
  }
  .table-image-wrapper{
    text-align: center;
    height: 67px;
    margin: 5px 0;
  }
  .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active {
    color: #00C6F0;
  }


  .loading-layer{
    position: fixed;
    z-index: 1000;
    width:100%;
    height: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    background: rgba(0,0,0,0.3);
    left:0;
    top:0;
  }

  .loading{
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
  }


  $ac_color:#0d1721;

  $green:#1fc6a0;

  .el-submenu__title:hover{
    background:$ac_color !important;
  }

  .el-submenu i{
    color: $green !important;
  }
  .widget-header {
    width: 100% !important;
    border-top: 3px solid #ddd;
    .icon-desc {
      width: 500px !important;
    }
    .icon-title{
      font-weight: bold;
    }
    .icon-value{
      color: #14ceb0 !important;
    }
  }

</style>
